import { Modal, Tag, Drawer, Button } from 'antd'
import ExcelTable from '@components/exportExcel'
import LogForm from '@/pages/setting/logManage/components/LogForm'
import { useRef, useState } from 'react'
import { ActionType, ProFormInstance } from '@ant-design/pro-components'

const SystemLog: React.FC = () => {
    useRef<ActionType>()
    useRef<ProFormInstance>()
    const [tableItem, setTableItem] = useState()
    const [detailDrawer, setDetailDrawer] = useState(false)
    function showAddDrawer(item: any) {
        setTableItem(item)
        setDetailDrawer(true)
    }

    function onCloseDrawer() {
        setDetailDrawer(false)
    }
    return (
        <>
            <ExcelTable
              requestFn={ params => {
                  return {
                      'code': 200,
                      'message': '操作成功',
                      'data': {
                          'pageNum': 1,
                          'pageSize': 20,
                          'totalPage': 1,
                          'total': 3,
                          'list': [
                              {
                                  createTime: '2022-02-20 13:50:15',
                                  person: 'admin',
                                  type: '1',
                                  mode: '首页',
                                  content: '用户信息-修改用户信息',
                                  ip: '【中国/成都】192.168.1.1',
                              },
                              {
                                  createTime: '2022-02-20 13:50:15',
                                  person: 'admin',
                                  type: '1',
                                  mode: '首页',
                                  content: '用户信息-修改用户信息',
                                  ip: '【中国/成都】192.168.1.1',
                              },
                              {
                                  createTime: '2022-02-20 13:50:15',
                                  person: 'admin',
                                  type: '1',
                                  mode: '首页',
                                  content: '用户信息-修改用户信息',
                                  ip: '【中国/成都】192.168.1.1',
                              }
                          ]
                      }
                  }
              }}
              rowSelection={false}
              toolBarRenderFn={() => []}
              columns={[
                  {
                      title: '操作时间',
                      dataIndex: 'keyword7',
                      valueType: 'dateRange',
                      hideInTable: true
                  },
                  {
                      title: '操作人',
                      dataIndex: 'keyword6',
                      hideInTable: true
                  },
                  {
                      title: '操作内容',
                      dataIndex: 'keyword',
                      hideInTable: true
                  },
                  {
                      title: '操作状态',
                      dataIndex: 'keyword5',
                      hideInTable: true,
                      valueType: 'select',
                      valueEnum: {
                          all: '全部'
                      }
                  },
                  /** search */
                  {
                      title: '序号',
                      valueType: 'index',
                      hideInSearch: true
                  },
                  {
                      title: '操作时间',
                      dataIndex: 'createTime',
                      hideInSearch: true,
                      valueType: 'dateTime'
                  },
                  {
                      title: '操作人',
                      dataIndex: 'person',
                      hideInSearch: true
                  },
                  {
                      title: '操作状态',
                      dataIndex: 'type',
                      hideInSearch: true,
                      render: (_, record) => {
                          return <Tag color={record.type == 1 ? 'success' : 'error'}>{record.type == 1 ? '成功' : '失败'}</Tag>
                      }
                  },
                  {
                      title: '操作模块',
                      dataIndex: 'mode',
                      hideInSearch: true
                  },
                  {
                      title: '操作内容',
                      dataIndex: 'content',
                      hideInSearch: true
                  },
                  {
                      title: '操作IP',
                      dataIndex: 'ip',
                      hideInSearch: true
                  },
                  {
                      title: '操作',
                      key: 'option',
                      valueType: 'option',
                      render: (_, record) => [
                          <a key="disabled" onClick={() => showAddDrawer(record)}>详情</a>,
                          <a key="delete" onClick={() => {
                              Modal.warning({
                                  title: '提示',
                                  content: '确定删除该记录吗?',
                                  okText: '确定',
                                  okCancel: true,
                                  onOk() {
                                      console.log('Confirmed:onOk ')
                                  }
                              })
                          }}>删除</a>
                      ]
                  }
              ]} />
            <Drawer title="详情" onClose={onCloseDrawer} open={detailDrawer} destroyOnClose>
                <LogForm item={tableItem} onClose={onCloseDrawer}></LogForm>
            </Drawer>
        </>
    )
}

export default SystemLog